<!DOCTYPE HTML>
<html>
<head>
<title>klink</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css" />
<style type="text/css">
div#findBar.ui-grid-a .ui-block-a { width: 65% }
div#findBar.ui-grid-a .ui-block-b { width: 35% }
</style>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
	
	var py = "";
	var login_sts = "";
	var url = "/klink";
	
	$('#login').live('pagebeforecreate',function(event){
		login_sts = "";
		sessionStorage.removeItem("email_account_name");
		sessionStorage.removeItem("email_account_pwd");
	});

	
	$('#login').live('pageinit',function(event){
		var login_name = localStorage.getItem("login_name");
		var login_pwd = localStorage.getItem("login_pwd");
		if(login_name != null && login_pwd != null){
			$("#uname").val(login_name);
			$("#pwd").val(login_pwd);
		}
	});
	
	$('#main').live('pagebeforecreate',function(event){
		if(!checkLoginSts()){
			$.mobile.changePage($("#login"),{transition: "slide"});
		}
	});
	
	$('#contact_list').live('pagebeforecreate',function(event){
		if(!checkLoginSts()){
			$.mobile.changePage($("#login"),{transition: "slide"});
		}
	});
	
	$('#linkman_info').live('pagebeforecreate',function(event){
		if(!checkLoginSts()){
			$.mobile.changePage($("#login"),{transition: "slide"});
		}
	});
	
	$('#contact').live('pagebeforecreate',function(event){
		if(!checkLoginSts()){
			$.mobile.changePage($("#login"),{transition: "slide"});
		}
	});
	

	$('#about').live('pagebeforecreate',function(event){
		if(!checkLoginSts()){
			$.mobile.changePage($("#login"),{transition: "slide"});
		}
	});

	$('#sms').live('pagebeforecreate',function(event){
		if(!checkLoginSts()){
			$.mobile.changePage($("#login"),{transition: "slide"});
		}
		
	});
	
	$('#email').live('pagebeforecreate',function(event){
		if(!checkLoginSts()){
			$.mobile.changePage($("#login"),{transition: "slide"});
		}
		
	});
	
	$('#muser').live('pagebeforecreate',function(event){
		if(!checkLoginSts()){
			$.mobile.changePage($("#login"),{transition: "slide"});
		}
	});
	
	
	//check login
	function checkLoginSts(){
		if(login_sts == ""){
			return false;
		}else{
			return true;
		}

	}
	
	//初始化title bar
	function initContactCount(){
		$.mobile.showPageLoadingMsg();
		$.getJSON(url+"?method=getContactCount&callback=?",function(json){
			$.mobile.hidePageLoadingMsg();
			$("#sw").attr("placeholder","收录"+json.count+"条联系人");
		});
	}
	
	$(document).ready(function() {

		//input clear event
		$('.ui-input-clear').live('tap', function () {
			resetSWInput();
		});
		
		//处理按钮点击事件
		$(":button").click(function(){
			var bId = $(this).attr("id")
			if(bId == "doNull"){ //重置选择按钮
				return false;
			}else if(bId == "doFind"){ //执行查询按钮
				
				if(!checkLoginSts()){
					$.mobile.changePage($("#login"),{transition: "slide"});
					return false;
				}
				
				$.mobile.showPageLoadingMsg();
				
				//获取sw值，判断是否为空
				var swVal = $("#sw").val();
				if(swVal.length > 1){
					$.getJSON(url+"?method=getInfoByPy&py="+swVal+"&callback=?", function(json) {
						
						$.mobile.hidePageLoadingMsg();
						
						if($.isEmptyObject(json)){
							return myAlert("查询结果为空，请重新选择关键字!");
						}else{
							$("#contactsList").empty();//清空列表

							$.each(json, function(i,item){
								
								var li_info = '<li data-role="list-divider">'+i+'</li>';
								
								$.each(item,function(k,v){
									var contact_name = v.contact_name;
									var email_info = v.email_info;
									var phone_info = v.phone_info;
									
									li_info += '<li><a href="#" onclick="gotoDialog(\''+contact_name+'\',\''+phone_info+'\',\''+email_info+'\')" data-inline="true"><h4>'+contact_name+'</h4>';
									li_info += '<p>手机：'+phone_info+'</p>';
									li_info += '<p>邮件：'+email_info+'</p></a></li>';
								});
								$("#contactsList").append(li_info);
							});
							
							//重置
							resetSWInput();
							
							//跳转
							$.mobile.changePage($("#contact_list"),{transition: "slide"});
							$("#contactsList").listview("refresh");   //在使用'ul'标签时才使用，作用:刷新列表
							$("#contactsList").trigger("create");  //重点：这名的意思是重新加载所在标签的样式。非常有用的一句话，不加这一句你动态append的标签将丢失Css样式
						}
						
					});
				}else{
					return myAlert("请至少要选择2个字母进行查询！");
				}
				
			}else{
				py += bId;
				initSWInput(py);
			}
		});
		
		
		//处理发送短信的按钮点击事件
		$("#sendSmsBtn").click(function(){
			
			if(!checkLoginSts()){
				$.mobile.changePage($("#login"),{transition: "slide"});
				return false;
			}
			
			var msg = $("#msg").val();
			var phone_num = $("#sendSmsBtn").attr("title");
			if($.isEmptyObject(phone_num)){
				return myAlert("手机号码不存在，发送失败！");
			}else{
				if($.trim(msg).length > 0){
					if(confirm("确认发送短信?")){
						return myAlert("<h3>短信发送失败</h3><p>原因：</p><p>由于此作品为参加比赛，所以屏蔽了此功能，请谅解。</p>");
					}
				}else{
					return myAlert("信息内容不能为空！");
				}
			}
		});
		
		//发短信
		$("#sendSMS").click(function(){
			if(!checkLoginSts()){
				$.mobile.changePage($("#login"),{transition: "slide"});
				return false;
			}
			
			var rev_phone_num = $("#rev_phone_num").val();
			var sms_msg = $("#sms_msg").val();
			var sendme = $("#sendmeFlag").is(':checked');
			
			if($.isEmptyObject(rev_phone_num) || $.isEmptyObject(sms_msg)){
				return myAlert("接收短信的手机号码、短信内容不能为空！");
			}else{
				if(confirm("确认发送短信?")){
					return myAlert("<h3>短信发送失败</h3><p>原因：</p><p>由于此作品为参加比赛，所以屏蔽了此功能，请谅解。</p>");
				}
			}
		});
		
		//处理发送邮件的按钮点击事件
		$("#sendMailBtn").click(function(){
			
			if(!checkLoginSts()){
				$.mobile.changePage($("#login"),{transition: "slide"});
				return false;
			}

			
			var msg = $("#msg").val();
			var email = $("#sendMailBtn").attr("title");
			if($.isEmptyObject(email)){
				return myAlert("邮件地址不存在，发送失败！");
			}else{
				if($.trim(msg).length > 0){
					if(confirm("确认发送邮件?")){
						$.mobile.showPageLoadingMsg();

						//调用sendemail服务
						$.getJSON(encodeURI(url+"?method=sendMail&sendme=0&title=来自osc_mopaas_klink的邮件&to="+email+"&msg="+msg+"&callback=?"),function(json){
							$.mobile.hidePageLoadingMsg();
							if(json.result == "1"){
								$("#msg").val("");
								return myAlert("邮件发送成功");
							}else{
								return myAlert("邮件发送失败");
							}
						});
					}
				}else{
					return myAlert("信息内容不能为空！");
				}
			}
		});
		
		//发邮件
		$("#sendMail").click(function(){
			
			if(!checkLoginSts()){
				$.mobile.changePage($("#login"),{transition: "slide"});
				return false;
			}

			
			var mail_to = $("#mail_to").val();
			var mail_subject = $("#mail_subject").val();
			var mail_content = $("#mail_content").val();
			var mail2meFlag = $("#mail2meFlag").is(':checked');
			
			if(!chkMailFormat(mail_to)){
				return myAlert("收件人地址为空或格式不合法！");
			}else if($.trim(mail_subject).length == 0 || $.trim(mail_content).length == 0){
				return myAlert("邮件主题和正文不能为空！");
			}else{
				if(confirm("确认发送邮件?")){
					$.mobile.showPageLoadingMsg();

					var smFlag = "0";//不发送给自己
					if(mail2meFlag){
						smFlag = "1";//发送给自己
					}
					
					//调用sendemail服务
					$.getJSON(encodeURI(url+"?method=sendMail&sendme="+smFlag+"&title="+mail_subject+"&to="+mail_to+"&msg="+mail_content+"&callback=?"),function(json){
						$.mobile.hidePageLoadingMsg();
						if(json.result == "1"){
							$("#mail_to").val("");
							$("#mail_subject").val("");
							$("#mail_content").val("");
							return myAlert("邮件发送成功");
						}else{
							return myAlert("邮件发送失败");
						}
					});
				}
			}
		});
		
		
		//登录按钮点击事件
		$("#submit_login").click(function(){
			var uname = $("#uname").val();
			var pwd = $("#pwd").val();
			var rememberme = $("#rememberme").is(':checked');
			login_sts = "ok";
			sessionStorage.setItem("email_account_name", uname);
			sessionStorage.setItem("email_account_pwd", pwd);
			
			if(rememberme){//保存信息
				//将登陆信息存储在localStorage
				localStorage.setItem("login_name", uname);
				localStorage.setItem("login_pwd", pwd);
			}else{
				//清除保存信息
				localStorage.removeItem("login_name");
				localStorage.removeItem("login_pwd");
			}
			
			//初始化 title
			$("#login_info").html("欢迎您：" + uname);
			//初始化联系人数量
			initContactCount();

			//跳转
			$.mobile.changePage($("#main"),{transition: "slide"});
			
		});
		
		//退出
		$("#logout").click(function(){
			login_sts = "";
			sessionStorage.removeItem("email_account_name");
			sessionStorage.removeItem("email_account_pwd");
			$.mobile.changePage($("#login"),{transition: "slide"});
		});
		
		//关于
		$("#goto_about").click(function(){
			$.mobile.changePage($("#about"),{transition: "slide"});
		});
		
		//管理联系人
		$("#goto_muser").click(function(){
			$.mobile.changePage($("#muser"),{transition: "slide"});
		});
		
		
		//goto 联系人检索
		$("#goto_contact").click(function(){
			$.mobile.changePage($("#contact"),{transition: "slide"});
		});
		
		//goto 发短信
		$("#goto_sms").click(function(){
			
			//init textarea rows is 4
			$("#sms_msg").css('height', '8em').css('width', '100%');
			
			$.mobile.changePage($("#sms"),{transition: "slide"});
		});
		
		//goto 发邮件
		$("#goto_email").click(function(){
			//init textarea rows is 4
			$("#mail_content").css('height', '8em').css('width', '100%');
			
			$.mobile.changePage($("#email"),{transition: "slide"});
		});
		
		//保存联系人信息
		$("#savec").click(function(){
			var id = $("#cid").val();
			var cname = $("#cname").val();
			var cgroup = $("#cgroup").val();
			var cphone = $("#cphone").val();
			var cmail = $("#cmail").val();

			
			if($.isEmptyObject(cname)){
				return myAlert("联系人姓名不能为空");
			}
			if(cgroup == "所属组列表"){
				return myAlert("请选择所属组");
			}
			if($.isEmptyObject(cphone)){
				return myAlert("手机号码不能为空");
			}
			if(!chkMailFormat(cmail)){
				return myAlert("电子邮件为空或格式不合法");
			}
			
			if(confirm("确认保存信息？")){
				//调用保存联系人信息服务
				$.getJSON(encodeURI(url+"?method=saveContact&id="+id+"&cname="+cname+"&cgroup="+cgroup+"&cphone="+cphone+"&cmail="+cmail+"&callback=?"),function(json){
					$.mobile.hidePageLoadingMsg();
					if(json.result == "1"){
						resetContactForm();
						return myAlert("联系人信息保存成功");
					}else{
						return myAlert("联系人信息保存失败");
					}
				});
			}
		});
		
		//清空信息
		$("#reset_i").click(function(){
			if(confirm("确认清空信息？")){
				resetContactForm();
			}
		});
		
		//panel open event
		$("#contact-panel").on("panelbeforeopen", function( event, ui ) {
			$.mobile.showPageLoadingMsg();
			//调用getAllContact服务
			$.getJSON(url+"?method=getAllContact&callback=?",function(json){
				$.mobile.hidePageLoadingMsg();
				if($.isEmptyObject(json)){
					return myAlert("查询结果为空，可能当前库中无联系人信息");
				}else{
					$("#contact_list_inpanel").empty();//清空
					
					$.each(json, function(i,item){
						
						var list_info = '<div data-role="collapsible" data-theme="e" data-content-theme="d" data-inset="true">';
						list_info += '<h3>' + i + '</h3>';
						list_info += '<ul data-role="listview">';
						
						$.each(item,function(k,v){
							var id = v.k_contact_id;
							var group_name = v.group_name;
							var contact_name = v.contact_name;
							var email_info = v.email_info;
							var phone_info = v.phone_info;
							
							list_info += '<li><a href="#" onclick="initCInfo(\''+id+'\',\''+contact_name+'\',\''+group_name+'\',\''+phone_info+'\',\''+email_info+'\')">'+contact_name+'</a></li>';
							
						});
						list_info += '</ul></div>';
						
						$("#contact_list_inpanel").append(list_info);
					});
					$("#contact_list_inpanel").trigger("create");
				}
			});
		});
	});

	//reset contact form
	function resetContactForm(){
		$("#cid").val("");
		$("#cname").val("");
		//reset jquery mobile select
		$('select#cgroup option').removeAttr('selected');
		$('#cgroup').selectmenu('refresh', true)
		
		$("#cphone").val("");
		$("#cmail").val("");
	}

	function initCInfo(id,n,g,p,e){
		$("#cid").val(id);
		$("#cname").val(n);
		
		// set jquery mobile select option selected
		$('#cgroup option[value='+g+']').attr('selected', 'selected');
		$('#cgroup').selectmenu('refresh', true);
		
		$("#cphone").val(p);
		$("#cmail").val(e);
	}
	
	function gotoDialog(n,p,e){
		$("#emp_name").html("姓名：" + n);
		$("#phone_info").html("手机："+p);
		$("#email_info").html("邮件："+e);
		if($.isEmptyObject(p)){
			$("#callPhoneBtn").attr("href","#");
		}else{
			$("#callPhoneBtn").attr("href","tel://"+p);
		}
		$("#sendSmsBtn").attr("title",p);
		$("#sendMailBtn").attr("title",e);
		$.mobile.changePage($("#linkman_info"),{transition: "slide"});
		return false;
	}
	
	function initSWInput(str){
		$("#sw").val(str);
	}
	
	function resetSWInput(){
		$("#sw").val("");
		py = "";
		initContactCount();
	}
	
	function myAlert(alertInfo){
		$("#alert_info").html(alertInfo);
		$.mobile.changePage($("#infoDialog"),{transition: "pop"});
		resetSWInput();
		return false;
	}
	
	//check mail format
	function chkMailFormat(x){
		if($.isEmptyObject(x)){
			return false;
		}
		
		var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
		if (x.search(emailRegEx) == -1) {
		     return false;
		}else{
			return true;
		}

	}
</script>
</head>
<body id="g_v">

	<!-- 登录界面 -->
	<div data-role="page" id="login">
 	
		<div data-role="header" data-position="fixed" data-theme="b">
			<h4>kLink</h4>
		</div>
	
		<div data-role="content">
			<label for="uname">邮箱名:</label>
			<input type="text" name="uname" id="uname" value="OSChina-MoPaaS"  />
			<label for="pwd">邮箱密码:</label>
			<input type="password" name="pwd" id="pwd" value="123456" />
			<br />
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<input checked="checked" type="checkbox" name="rememberme" data-theme="e" id="rememberme" class="custom" data-mini="true" />
					<label for="rememberme">记住我</label>
				</div>
				<div class="ui-block-b">
					<a id="submit_login" href="#" data-role="button" data-theme="b"  data-icon="home" data-mini="true">登录</a>
				</div>
			</div>
				<p><h5 style="color: red;">说明：为了方便大家进行测试，本程序屏蔽了登陆验证逻辑，直接点击登录按钮即可进入主界面。</h5></p>
		</div>
		
		<div data-role="footer" data-position="fixed" data-theme="b">
			<h4>The works of <b>恺哥</b></h4>
		</div>

	</div>
	<!-- 登录界面 end -->
	
	<!-- main 主界面 -->
	<div data-role="page" id="main">

 	
		<div data-role="header" data-position="fixed" data-theme="b">
			<h4 id="login_info"></h4>
		</div>
	
		<div data-role="content">
		
			
			<div class="ui-grid-a">
				<div class="ui-block-a">
				<a href="#" id="goto_contact" data-role="button" data-mini="true" ><img src="images/contact.png" /><br>联系人</a>
				</div>
				<div class="ui-block-b">
				<a href="#" id="goto_sms" data-role="button" data-mini="true" ><img src="images/sms.png" /><br>发短信</a>
				</div>
				                                       
				<div class="ui-block-a">
				<a href="#" id="goto_email" data-role="button" data-mini="true" ><img src="images/email.png" /><br>发邮件</a>
				</div>

				<div class="ui-block-b">
				<a href="#" id="goto_muser" data-role="button" data-mini="true" ><img src="images/m_user.png" /><br>管理联系人</a>
				</div>
				
				<div class="ui-block-a">
				<a href="#" id="goto_about" data-role="button" data-mini="true" ><img src="images/about.png" /><br>关于</a>
				</div>
				                                      
				<div class="ui-block-b">
				<a href="#" id="logout" data-role="button" data-mini="true" ><img src="images/home.png" /><br>退出</a>
				</div>
			</div><!-- /grid-a -->
		
		</div>
		
		<div data-role="footer" data-position="fixed" data-theme="b">
			<h4>The works of <b>恺哥</b></h4>
		</div>

	</div>
	<!-- main 主界面 end-->
	

	<!-- 联系人界面 -->
	<div data-role="page" id="contact" data-add-back-btn="true">

		<div data-role="header" data-position="fixed" data-theme="b">
			<h4>查询联系人</h4>
		</div>
	
		<div data-role="content">
		
			<div id="findBar" class="ui-grid-a">
				<div class="ui-block-a"><input x-webkit-speech lang="zh-CN"  placeholder="" data-theme="e" type="search" name="sw" id="sw" value=""  data-mini="true"/></div>
				<div class="ui-block-b"><button id="doFind" type="button" data-theme="b"  data-icon="search" data-mini="true">查询</button></div>
			</div>
			
			<div class="ui-grid-c">
				<div class="ui-block-a"><button id="a" type="button" data-theme="c" data-mini="true">A</button></div>
				<div class="ui-block-b"><button id="b" type="button" data-theme="c" data-mini="true">B</button></div>
				<div class="ui-block-c"><button id="c" type="button" data-theme="c" data-mini="true">C</button></div>
				<div class="ui-block-d"><button id="d" type="button" data-theme="c" data-mini="true">D</button></div>
				                                       
				<div class="ui-block-a"><button id="e" type="button" data-theme="c" data-mini="true">E</button></div>
				<div class="ui-block-b"><button id="f" type="button" data-theme="c" data-mini="true">F</button></div>
				<div class="ui-block-c"><button id="g" type="button" data-theme="c" data-mini="true">G</button></div>
				<div class="ui-block-d"><button id="h" type="button" data-theme="c" data-mini="true">H</button></div>
				                                      
				<div class="ui-block-a"><button id="i" type="button" data-theme="c" data-mini="true">I</button></div>
				<div class="ui-block-b"><button id="j" type="button" data-theme="c" data-mini="true">J</button></div>
				<div class="ui-block-c"><button id="k" type="button" data-theme="c" data-mini="true">K</button></div>
				<div class="ui-block-d"><button id="l" type="button" data-theme="c" data-mini="true">L</button></div>
				
				<div class="ui-block-a"><button id="m" type="button" data-theme="c" data-mini="true">M</button></div>
				<div class="ui-block-b"><button id="n" type="button" data-theme="c" data-mini="true">N</button></div>
				<div class="ui-block-c"><button id="o" type="button" data-theme="c" data-mini="true">O</button></div>
				<div class="ui-block-d"><button id="p" type="button" data-theme="c" data-mini="true">P</button></div>
				
				<div class="ui-block-a"><button id="q" type="button" data-theme="c" data-mini="true">Q</button></div>
				<div class="ui-block-b"><button id="r" type="button" data-theme="c" data-mini="true">R</button></div>
				<div class="ui-block-c"><button id="s" type="button" data-theme="c" data-mini="true">S</button></div>
				<div class="ui-block-d"><button id="t" type="button" data-theme="c" data-mini="true">T</button></div>
				
				<div class="ui-block-a"><button id="u" type="button" data-theme="c" data-mini="true">U</button></div>
				<div class="ui-block-b"><button id="v" type="button" data-theme="c" data-mini="true">V</button></div>
				<div class="ui-block-c"><button id="w" type="button" data-theme="c" data-mini="true">W</button></div>
				<div class="ui-block-d"><button id="x" type="button" data-theme="c" data-mini="true">X</button></div>
				                                    
				<div class="ui-block-a"><button id="y" type="button" data-theme="c" data-mini="true">Y</button></div>
				<div class="ui-block-b"><button id="z" type="button" data-theme="c" data-mini="true">Z</button></div>
				<div class="ui-block-c"><button id="doNull" type="button" data-theme="c" data-mini="true">#</button></div>
				<div class="ui-block-d"><button id="doNull" type="button" data-theme="c" data-mini="true">#</button></div>
			</div><!-- /grid-c -->
			<p><h5 style="color: red;">使用说明：输入联系人的拼音首字母进行查询；如：红薯，则输入hs即可。</h5></p>
		
		</div>
		
		<div data-role="footer" data-position="fixed" data-theme="b">
			<h4>The works of <b>恺哥</b></h4>
		</div>

	</div>
	<!-- 联系人界面 end -->
	
	<!-- 联系人列表 -->
	<div data-role="page" id="contact_list"  data-add-back-btn="true">
	
		<div data-role="header" data-position="fixed" data-theme="b" >
			<h4>联系人列表</h4>
		</div>
	
		<div data-role="content">
			<ul id="contactsList" data-role="listview" data-inset="true" data-theme="d" data-divider-theme="b">
			</ul>
		</div>
	</div>
	<!-- 联系人列表 end -->

	<!-- 联系人信息 -->
	<div data-role="page" id="linkman_info"  data-add-back-btn="true">
		<div data-role="header" data-position="fixed" data-theme="b" >
			<h4>联系人信息</h4>
		</div>
	
		<div data-role="content">
			<h4 id="emp_name"></h4>
			<h4 id="phone_info"></h4>
			<h4 id="email_info"></h4>
			<a href="tel://" data-role="button" data-mini="true" id="callPhoneBtn" data-theme="b">打电话</a>
			<div data-role="fieldcontain">
				<textarea name="msg" id="msg" data-mini="true" data-theme="e" placeholder="请输入信息内容"></textarea>
			</div>
			<div class="ui-grid-a">
				<div class="ui-block-a">
				<a title="" data-mini="true" href="#" data-role="button" id="sendSmsBtn"  data-theme="a">发短信</a>
				</div>
				<div class="ui-block-b"><a title="" data-mini="true" href="#" data-role="button" id="sendMailBtn" data-theme="e">发邮件</a></div>
			</div>
			<p><h5 style="color: red;">备注：由于此作品为参加比赛，所以屏蔽了发短信功能；另外打电话功能仅在手机端访问时可用。</h5></p>
		</div>
	
	</div>
	<!-- 联系人信息 end -->

	<!-- 查询结果为空的信息提示框 -->
	<div data-role="dialog" id="infoDialog">
			<div data-role="header" data-theme="b">
				<h1>信息对话框</h1>
			</div>
			<div data-role="content" data-theme="c">
				<p><h3 id="alert_info"></h3></p>
				<br/>
				<a href="#" data-role="button" data-rel="back" data-theme="b">OK</a>    
			</div>
	</div>
	<!-- 查询结果为空的信息提示框  end-->
	
	<!-- 关于 -->
	<div data-role="page" id="about" data-add-back-btn="true">
		<div data-role="header" data-position="fixed" data-theme="b" >
			<h4>关于</h4>
		</div>
		<div data-role="content">
			<ul data-inset="true" data-theme="d" data-divider-theme="b" data-role="listview">
				<li data-role="list-divider">V1.0发布说明</li>
				<li>支持按姓名拼音检索联系人功能</li>
				<li>支持发送短信功能-demo禁用</li>
				<li>支持发送邮件功能</li>
				<li>支持编辑联系人功能</li>
				<li>支持sendme功能</li>
				<li>增加Google云语音输入（chrome only）</li>
			</ul>
		</div>
		<div data-role="footer" data-position="fixed" data-theme="b">
			<h4>The works of <b>恺哥</b></h4>
		</div>
	</div>
	<!-- 关于 end -->
	
	<!-- 发短信 -->
	<div data-role="page" id="sms" data-add-back-btn="true">
		<div data-role="header" data-position="fixed" data-theme="b" >
			<h4>发短信</h4>
		</div>
		<div data-role="content">
			<label for="rev_phone_num"><b>接收短信的手机号码:</b></label>
			<input x-webkit-speech lang="zh-CN" type="text" name="rev_phone_num" id="rev_phone_num" data-theme="e"  data-mini="true" />
			<br/>
			<label for="sms_content"><b>短信内容:</b></label>
			<textarea name="sms_msg" id="sms_msg" data-mini="true" data-theme="e" ></textarea>
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<input checked="checked" type="checkbox" name="sendmeFlag" data-theme="e" id="sendmeFlag" class="custom" data-mini="true" />
					<label for="sendmeFlag">Send Me?</label>
				</div>
				<div class="ui-block-b">
					<a title="" data-mini="true" href="#" data-role="button" id="sendSMS"  data-theme="b">发短信</a>
				</div>
			</div>
			<p><h5 style="color: red;">备注：由于此作品为参加比赛，所以屏蔽了此功能，请谅解。</h5></p>
		</div>
	</div>
	<!-- 发短信end -->
	
	<!-- 发邮件 -->
	<div data-role="page" id="email" data-add-back-btn="true">
		<div data-role="header" data-position="fixed" data-theme="b" >
			<h4>发邮件</h4>
		</div>
		<div data-role="content">
			<label for="mail_to"><b>收件人邮箱:</b></label>
			<input x-webkit-speech lang="zh-CN" type="text" name="mail_to" id="mail_to" data-theme="e"  data-mini="true" />
			<br/>
			<label for="mail_subject"><b>邮件主题:</b></label>
			<input x-webkit-speech lang="zh-CN" type="text" name="mail_subject" id="mail_subject" data-theme="e"  data-mini="true" />
			<br/>
			<label for="mail_content"><b>邮件正文:</b></label>
			<textarea name="mail_content" id="mail_content" data-mini="true" data-theme="e" ></textarea>
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<input checked="checked" type="checkbox" name="mail2meFlag" data-theme="e" id="mail2meFlag" class="custom" data-mini="true" />
					<label for="mail2meFlag">Send Me?</label>
				</div>
				<div class="ui-block-b">
					<a title="" data-mini="true" href="#" data-role="button" id="sendMail" data-theme="b">发邮件</a>
				</div>
			</div>
			<p><h5 style="color: red;">免责声明：本应用并不保证邮件100%到达。由于此作品为参加比赛，所以屏蔽了sendme功能，请谅解。</h5></p>
		</div>
	</div>
	<!-- 发邮件end -->

	<!-- 管理联系人 -->
	<div data-role="page" id="muser" data-add-back-btn="true">
		<div data-role="header" data-position="fixed" data-theme="b" >
			<h4>管理联系人</h4>
		</div>
		<div data-role="content">
			<input type="hidden" name="cid" id="cid" value="" />
			<label for="cname"><b>联系人姓名:</b></label>
			<input x-webkit-speech lang="zh-CN" type="text" name="cname" id="cname" data-theme="e"  data-mini="true" />
			<br/>

			<label for="cgroup" class="select"><b>所属组:</b></label>
			<select name="cgroup" id="cgroup" data-native-menu="false">
				<option>所属组列表</option>
			    <option value="方案组">方案组</option>
			    <option value="开发组">开发组</option>
			    <option value="业务组">业务组</option>
			    <option value="测试组">测试组</option>
			    <option value="设计组">设计组</option>
			    <option value="沟通协调组">沟通协调组</option>
			    <option value="领导组">领导组</option>
			</select>

			<br/>
			<label for="cphone"><b>手机号码:</b></label>
			<input x-webkit-speech lang="zh-CN" type="text" name="cphone" id="cphone" data-theme="e"  data-mini="true" />
			<br/>
			<label for="cmail"><b>电子邮件:</b></label>
			<input x-webkit-speech lang="zh-CN" type="text" name="cmail" id="cmail" data-theme="e"  data-mini="true" />
			<br/>
			<div class="ui-grid-b">
				<div class="ui-block-a">
					<a href="#contact-panel" id="editc" data-role="button" data-theme="e" data-mini="true" data-icon="bars">联系人</a>
				</div>
				<div class="ui-block-b">
					<a id="savec" data-role="button" data-theme="b" data-mini="true" data-icon="check">保存信息</a>
				</div>
				<div class="ui-block-c">
					<a id="reset_i" data-role="button" data-theme="a" data-mini="true" data-icon="delete">清空信息</a>
				</div>
			</div>
		</div>
		
    <div data-role="panel" id="contact-panel"  data-position="left" data-theme="c">
		<p>
			<a id="close_panel" data-role="button" data-theme="a" data-mini="true" data-icon="delete" data-rel="close">Close</a>
		</p>
		<div id="contact_list_inpanel"></div>
    </div><!-- /panel -->
	</div>
	<!-- 管理联系人end -->
</body>
</html>